<template>
	<div class="content">
		<!-- <video autoplay webkit-playsinline style="width: 100%; height: 100%;">
			<source :src="playingVideoUrl" type="application/vnd.apple.mpegurl" />
			<p class="warning">Your browser does not support HTML5 video.</p>
		</video> -->

		<!-- <div id="dplayer" style="width: 100%; height: 100%;"></div>-->

		<!-- <button @click="play()" class="video">播放</button> -->
		<!-- <button @click="this.$router.go(-1)" class="go">返回</button> -->
		<video style="width: 100%; height: 100%;" id="cameraMonitoringVideo" class="video-js vjs-default-skin"
			preload="auto">
			<source :src="playingVideoUrl" type="application/x-mpegURL">
		</video>

	</div>
</template>

<script>
//引入 hls与dplayer 用于解析播放视频 
import Hls from 'hls.js'
import Dplayer from 'dplayer'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
// import "@videojs/http-streaming"

export default {
	components: {
		// "d-player": VueDPlayer,
	},
	props: ["playingVideoUrl"],
	data() {
		return {
			dp: null,
			video_url: '',
			// playingVideoUrl: ''

		}
	},
	watch: {
		'playingVideoUrl'(newVal, old) {

			this.play()
		}
	},
	// 离开页面销毁视频播放器
	beforeDestroy() {
		if (this.player != null) {
			this.player.dispose() // dispose()会直接删除Dom元素
		}
	},
	mounted() {
	},
	created() {
		this.$nextTick(() => {
			this.play()
		})

	},

	methods: {
		play() {
			this.player = videojs('cameraMonitoringVideo', {
				bigPlayButton: false,
				textTrackDisplay: false,
				posterImage: true,
				errorDisplay: false,
				controlBar: true,
				muted: true //静音模式 、、 解决首次页面加载播放。
			}, function () {
				this.play() // 自动播放
			})
		},

		// video() {
		// 	this.video_url = this.playingVideoUrl;

		// 	this.dp = new Dplayer({
		// 		//播放器的一些参数
		// 		container: document.getElementById('dplayer'),
		// 		// autoplay: true, //是否自动播放
		// 		theme: '#FADFA3', //主题色
		// 		loop: true,//视频是否循环播放
		// 		lang: 'zh-cn',
		// 		screenshot: false,//是否开启截图
		// 		hotkey: true,//是否开启热键
		// 		preload: 'auto',//视频是否预加载
		// 		volume: 0.7,//默认音量
		// 		mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

		// 		// live: true,


		// 		autoplay: false,

		// 		video: {
		// 			url: this.video_url, //视频地址
		// 			// url: 'http://boliu.hbzcyc.com/474975DDEFA/474975DDEFA.m3u8', //视频地址
		// 			type: 'customHls',
		// 			// pluginOptions: {
		// 			// 	hls: {
		// 			// 		// hls config
		// 			// 	},
		// 			// },
		// 			customType: {
		// 				customHls: function (video) {
		// 					const hls = new Hls()  //实例化Hls  用于解析m3u8
		// 					hls.loadSource(video.src)
		// 					hls.attachMedia(video)
		// 				}
		// 			},
		// 		},
		// 	});
		// }
	}
}
</script>

<style scoped lang="scss">
button {
    font-size: 16px;
}
.video {
    margin: 20px;
    margin-left: 45%;
    color: #1e4368;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
    background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: linear-gradient(top, #f2f3f7, #e4e8ec);
    cursor: pointer;
}
.go {
    color: #01060f;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
    background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: linear-gradient(top, #f2f3f7, #e4e8ec);
}
</style>
